<template>
  <div class="echarts-container"
       ref="chartBox"
       @mouseenter="clearTimer"
       @mouseleave="setTimer">
  </div>
</template>

<script>
export default {
  name: 'Seller',
  props: {
    data: {
      type: Array | Object,
      default: () => []
    },
    size: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      // 图表实例对象
      echarts: null,
      // 图表配置对象
      option: {
        title: {
          text: '▎商家销售统计',
          left: 40,
          top: 30
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '5%',
          // 设置grid宽度包括坐标轴标签
          containLabel: true
        },
        xAxis: {type: 'value'},
        yAxis: {type: 'category'},
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: -1,
            // 设置指示线样式（不用shadow是因为无法调宽度）
            lineStyle: {
              type: 'solid',
              color: '#2d3443'
            }
          }
        },
        series: {
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            textStyle: {color: 'white'}
          },
          itemStyle: {
            color: {
              type: 'linear',
              x1: 0,
              y1: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {offset: 0, color: '#5052ee'},
                {offset: 1, color: '#ab6ee5'}
              ],
            }
          }
        }
      },
      timer: null,
      page: 0
    }
  },
  computed: {
    // 页数
    pageCount() {
      // 向上取整
      return Math.ceil(this.data.length / this.size)
    },
    // 展示的数据
    showData() {
      let data = JSON.parse(JSON.stringify(this.data))
      // 数据排序
      data.sort((a, b) => a.value - b.value)
      // 数据切片
      data = data.slice(this.page * this.size, (this.page + 1) * this.size)
      return data
    },
  },
  watch: {
    showData(v) {
      let updateOption = {
        yAxis: {data: v.map(i => i.name)},
        series: {data: v.map(i => i.value)}
      }
      this.echarts.setOption(updateOption)
    }
  },
  mounted() {
    this.echarts = this.$echarts.init(this.$refs.chartBox, this.$store.state.theme)
    this.echarts.setOption(this.option)
    this.setTimer()
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    this.clearTimer()
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    // 设置定时器
    setTimer() {
      this.timer = setInterval(() => {
        this.addPage()
      }, 4000)
    },
    clearTimer() {
      clearInterval(this.timer)
    },
    // 页数增加
    addPage() {
      this.page = (this.page + 1) % this.pageCount
    },
    // 页面尺寸改变
    resize() {
      let w = this.$refs.chartBox.offsetWidth
      let h = this.$refs.chartBox.offsetHeight
      let titleFontSize = w * 0.04
      let itemWidth = h * 0.1
      let updateOption = {
        title: {
          textStyle: {fontSize: titleFontSize},
        },
        grid: {
          top: 50 + titleFontSize
        },
        tooltip: {
          axisPointer: {
            lineStyle: {width: itemWidth}
          }
        },
        series: {
          // 柱形图柱宽
          barWidth: itemWidth,
          label: {
            textStyle: {fontSize: itemWidth / 3}
          },
          itemStyle: {
            borderRadius: [0, itemWidth / 2, itemWidth / 2, 0]
          }
        }
      }
      this.echarts.setOption(updateOption)
      this.echarts.resize()
    }
  }
}
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 100%;
}
</style>
